<template>
  <div :id="id" :style="{ width: echartsWidth, height: echartsHeight }"></div>
</template>
<script>
import * as echarts from "echarts";
let bgColor = "#fff";
let color = ["#0090FF", "#36CE9E", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];
const hexToRgba = (hex, opacity) => {
  let rgbaColor = "";
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
      "0x" + hex.slice(3, 5)
    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
  }
  return rgbaColor;
};

export default {
  data() {
    return {
      color,
      bgColor,
    };
  },
  props: {
    echartData: {
      type: Array,
      require: true,
    },
    echartsWidth: {
      type: String,
      require: true,
    },
    echartsHeight: {
      type: String,
      require: true,
    },
    xCompany: {
      type: String,
    },
    yCompany: {
      type: String,
    },
    xAxisData:{
      type:Array
    },
    id: {
      type: String,
    },
  },
  computed: {
    seriesData: function () {
      return this.echartData.map((item) => {
        return {
          name: item.name,
          type: item.type,
          smooth: true,
          // showSymbol: false,/
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[0], 0.5),
              shadowOffsetY: 8,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[0], 0.3),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0.1),
              shadowBlur: 10,
            },
          },
          data: item.data,
        };
      });
    },
    option: function () {
      return {
        backgroundColor: bgColor,
        color: color,
        legend: {
          right: 10,
          top: 10,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                万元`;
            });

            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "#ffffff",
              shadowColor: "rgba(225,225,225,1)",
              shadowBlur: 5,
            },
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: `{value}${this.xCompany}`,
              textStyle: {
                color: "#333",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            data: this.xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: `单位：${this.yCompany}`,
            axisLabel: {
              textStyle: {
                color: "#666",
              },
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#E9E9E9",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: this.seriesData,
      };
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(`${this.id}`));
      // 绘制图表
      myChart.setOption(this.option);
    },
  },
};
</script>